import React from 'react';
import { useHistory } from 'react-router';
// import { FullProgram, ProgramDetailInfo } from '@/api-type';
import { ProgramDetail, Program } from '@/data-type'
// import { ProgramDetailData } from '@/mock-data';
// import { request } from 'umi';
import { GetUrl } from '@/utils/api';
import { FormatterTime } from '@/utils/kits'
// import { useState } from 'react';
import { ColumnsType } from 'antd/lib/table'
import { useModel } from 'umi';
import {
  Button,
  Table,
  Tooltip,
  Select,
  Divider,
  Space
} from 'antd';
import { TagRender } from '@/components/style/TagRender';
// ColumnType<tempTp>[]
const DetaliList: React.FC<{ datas: ProgramDetail[] }> = ({ datas }) => {
  const columns: ColumnsType<ProgramDetail> = [
    {
      title: 'ID',
      align: 'center',
      dataIndex: 'id'
    },
    {
      title: '项目Id',
      align: 'center',
      dataIndex: 'programId'
    },
    {
      title: '设备名称',
      align: 'center',
      dataIndex: 'eqName'
    },
    {
      title: '设备型号',
      align: 'center',
      dataIndex: 'eqModel'
    },
    {
      title: '开始时间',
      align: 'center',
      dataIndex: 'startDate',
      render: FormatterTime
    },
    {
      title: '结束时间',
      align: 'center',
      dataIndex: 'endDate',
      render: FormatterTime
    },
    {
      title: '备注',
      dataIndex: 'remark',
      align: 'center',
      width: 100,
      onCell: () => {
        return {
          style: {
            maxWidth: 100,
            overflow: 'hidden',
            whiteSpace: 'nowrap',
            textOverflow: 'ellipsis',
            cursor: 'pointer'
          }
        }
      },
      render: (text: string) => <Tooltip placement="top" title={text}>{text}</Tooltip>
    },
  ];

  function onChange(pagination: any, filters: any, sorter: any, extra: any) {
    console.log('params', pagination, filters, sorter, extra);
  }
  // const d:ProgramDetail[]=datas??<ProgramDetail[]>[];
  return (<Table columns={columns}
    scroll={{ x: '1500' }}
    dataSource={datas}
    onChange={onChange} />);
}
//这里带参数切换路由时还是会报一堆警告，后续查看
const ProgramDetailComponent: React.FC<{ program: Program }> = (props) => {
  const { dataSource, reload, deleteById, updateOne } = useModel('ProgramDetailModel');
  const history = useHistory();
  // const astate = history.location.state;
  let astate: any = history.location.state;
  let programId = "";
  if (astate !== undefined) {
    programId = astate.id;
  }
  let TypeOption: { value: string }[] = getOption(dataSource, (d) => d.eqModel);
  let CrashFlowOption: { value: string }[] = getOption(dataSource, (d) => d.status);
  return (
    <div>
      <Button onClick={() => { history.goBack() }}>返回上一页</Button>
      <Divider></Divider>
      <div>
        <div className="div-not-row">
          <span>类型选择：</span>
          <Select
            mode="multiple"
            showArrow
            tagRender={TagRender}
            defaultValue={[]}
            style={{ width: '30%' }}
            options={TypeOption}
          />
        </div>
        <div className="div-not-row">
          <span>现金流方向：</span>
          <Select
            mode="multiple"
            showArrow
            tagRender={TagRender}
            defaultValue={[]}
            style={{ width: '30%' }}
            options={CrashFlowOption}
          />
          <Button style={{ margin: '10px' }}>确定</Button>
        </div>
      </div>
      <div className="div-margin">&nbsp;</div>
      <DetaliList datas={dataSource ?? new Array<ProgramDetail>()} />
      <Divider plain>分割线</Divider>
      <DetaliList datas={dataSource ?? new Array<ProgramDetail>()} />
    </div>
  );
}
function getOption(datas: ProgramDetail[] | undefined, fn: (pdata: ProgramDetail) => string): { value: string }[] {
  let option: { value: string }[] = []
  let nameSet = new Set<string>();
  for (let data of datas ?? new Array<ProgramDetail>()) {
    // nameSet.add(data.programName);
    nameSet.add(fn.call(null, data));
  }
  nameSet.forEach(function (name) {
    option.push({ value: name })
  });
  return option;
}
export default ProgramDetailComponent;